      <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态添加信息--动态注册</title>
    </head>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #mask{
            height: 100%;
            width: 100%;
            background: #777777;
            opacity: 0.6;
            /*z-index: -10001;*/
            display: none;
            position: fixed;
            top: 0;
            left: 0;
        }
        #bottom1 table{
            /*margin: 100px 100px 100px;*/

            border: 1px solid #6f6369;
            border-collapse: collapse;
        }
        #bottom1 thead td{
            /*display: bl;*/
            width: 100px;
            height: 35px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            background: cadetblue;
        }
        #bottom1 tr,td{
            border: 1px solid #6f6369;
        }
        #bottom1{
            /*display: none;*/
            width: 500px;
            margin: 100px auto;
        }
        .addButton{
            width: 150px;
            height: 35px;
            font-size: 16px;
            margin-bottom: 15px;
        }
        #register{
            position: fixed;
            right: 40%;
            top: 25%;
            border: 1px solid aliceblue;
            display: none;
            background: #e0e8e8;
        }
        .for-submitt{
            text-align: center;
        }
        .reg-title{
            position: relative;
            background: cornflowerblue;
            margin-bottom: 10px;

        }
        .reg-title span{
            width: auto;
            margin-right: 10px;
            text-align: left;
            display: block;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            /*cursor: pointer;*/
        }
        .cancel{
            font-size: 16px;
            position: absolute;
            right: 0;
            top: 4px;
            width: 20px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        .add-iterm{
            margin-bottom: 30px;
            position: relative;
            height: 100%;
            /*position: relative;*/
            padding-left: 100px;
            padding-right: 20px;
            /*margin-bottom: 34px;*/
            line-height: 36px;
        }
        .add-iterm label{

            position: absolute;
            left: 20px;
            display: block;
            text-align: right;
            width: 50px;
        }
        .add-iterm #nature{
            height: 35px;
            width: 300px;
            font-size: 16px;
        }
        .add-iterm #nature1{
            height: 35px;
            width: 300px;
            font-size: 16px;
        }
        #for-submitt{
            height: 35px;
            width: 75px;
            font-size: 16px;
            margin-bottom: 20px;
        }
        td{
            text-align: center;
            /*display: block;*/
            height: 30px;
            line-height: 30px;
            width: 158px;
        }
    </style>
    <body>
    <div id="bottom1">
        <div id="button">
<!--            <button>添加新的内容</button>-->
            <input type="button" id="addButton" class="addButton" value="添加内容">
        </div>
        <table>
            <thead>
            <tr>
                <td>名称</td>
                <td>属性</td>
                <td>作用</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>wujisn</td>
                <td>我们都来自中国</td>
                <td>
                    <a href="javascrip:;" class="get" style="text-decoration: none">GET</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="register">
        <div class="reg-title">
            <span>添加内容</span>
            <div class="cancel">X</div>
        </div>
        <div class="add-iterm">
            <label for="nature">名称：</label>
            <input type="text" name="" id="nature" placeholder="请输入姓名">
        </div>
        <div class="add-iterm">
            <label for="nature1">属性：</label>
            <input type="text" name="" id="nature1" value="我们都来自中国">
        </div>
        <div class="for-submitt">
            <input type="button" value="提交" id="for-submitt">
        </div>
    </div>
    <script>
        $(function () {
            $("a").click(function () {
              $(this).parent("td").parent("tr").remove();
            })
            $("#addButton").click(function () {
                // alert(111)
                $("#mask").show();
                $("#register").show();
                $("#bottom1").hide();

            })
            $(".cancel").click(function () {
                $("#mask").hide();
                $("#register").hide();
                $("#bottom1").show();
            })
            $("#for-submitt").click(function () {
                if (( $("#nature").val())===""){
                    alert("项目不能为空！")
                    return;
                }
                var tr=$("<tr></tr>>")
                tr.html('<td>'+$("#nature").val()+'</td><td>'+$("#nature1").val()+'</td><td><a href="javascrip:;" class="get" style="text-decoration: none">GET</a></td>');
                $("tbody").append(tr);
                $("#mask").hide();
                $("#register").hide();
                $("#bottom1").show();
                $("#nature").val("")
                $("tr").find("a").click(function () {
                    $(this).parent("td").parent("tr").remove();
                })
            })
        })
    </script>
    </body>
    </html>